<template>
  <div class="container">
    <el-row>
      <el-col class="userTitle">
        <p>角色列表</p>
      </el-col>
    </el-row>
    <section class="userContent">
      <div class="addUser">
        <el-row>
          <el-col :span="1">
            <el-button type="primary" @click="dialogRolesFormVisible = true">
              <i class="fa fa-plus" aria-hidden="true"></i>
              <span>新增角色</span>
            </el-button>
          </el-col>
          <el-col :span="4" :offset="19">
            <el-form :model="searchForm">
              <el-input placeholder="请输入角色名称" v-model="searchForm.roleName">
                <el-button slot="append" icon="search" @click.native.prevent="searchRole"></el-button>
              </el-input>
            </el-form>
          </el-col>
        </el-row>
      </div>

      <!-- 角色列表 -->
      <div class="userInfo">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="left" props="roleName" label="角色名称" width="130">
            <template slot-scope="scope">
              <span>{{ scope.row.roleName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="角色编码" width="130">
            <template slot-scope="scope">
              <span>{{scope.row.roleCode}}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="描述信息" width="170">
            <template slot-scope="scope">
              <span>{{scope.row.description}}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="创建时间" width="150">
            <template slot-scope="scope">
              <span>{{scope.row.updateTime}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left">
            <template slot-scope="scope">
              <el-button class="edit" size="small" type="text" @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i>分配权限</el-button>
              <el-button class="delete" size="small" type="text" @click.native.prevent="deleteRole(scope.$index, scope.row)"><i class="el-icon-delete"></i>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>

      <!-- 新增角色dialog -->
      <el-dialog title="新增角色" size="tiny" :visible.sync="dialogRolesFormVisible" :close-on-click-modal="false">
        <el-form :model="addForm">
          <el-form-item label="角色名称" label-width="80px">
            <el-input v-model="addForm.roleName" size="small" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色编码" label-width="80px">
            <el-input v-model="addForm.roleCode" size="small" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="描述信息" label-width="80px">
            <el-input type="textarea" size="small" v-model="addForm.description"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogRolesFormVisible = false">取 消</el-button>
          <el-button type="primary" size="small" @click.native.prevent="addRole">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 分配权限dialog		 -->
      <el-dialog title="分配权限" size="tiny" :visible.sync="dialogPermissionFormVisible" :close-on-click-modal="false">
        <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[]" :props="defaultProps">
        </el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogPermissionFormVisible = false">取 消</el-button>
          <el-button type="primary" size="small" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>

    </section>
  </div>
</template>

<style lang="scss" scoped>
.container {
  .userTitle {
    width: 100%;
    text-align: left;
    font-size: 22px;
    color: #444;
    height: 60px;
    border-bottom: 4px solid #cdd1da;
    line-height: 60px;
    padding-left: 20px;
  }
  .userContent {
    padding: 10px;
    background: #fff;
    .addUser {
      margin: 3px 10px 10px;
    }
    .searchForm {
      .searchForm .el-col {
        height: 45px;
      }
    }
  }

  .userInfo {
    .el-table {
      font-size: 13px;
    }
    .edit {
      color: #3c8dbc;
    }
    .delete {
      color: #ff4949;
    }
  }
  .block {
    text-align: right;
    padding-top: 13px;
  }
}
</style>

<script>
import { getRole, saveRole } from "../../api/api";
import util from "../../common/util";
export default {
  data() {
    return {
      addForm: {
        name: "",
        desc: ""
      },
      searchForm: {
        roleName: ""
      },

      data: [
        {
          id: 1,
          label: "系统管理",
          children: [
            {
              id: 2,
              label: "用户管理"
            },
            {
              id: 3,
              label: "角色管理"
            },
            {
              id: 4,
              label: "权限管理"
            }
          ]
        },
        {
          id: 5,
          label: "业务管理",
          children: [
            {
              id: 6,
              label: "机构管理"
            },
            {
              id: 7,
              label: "申请管理"
            },
            {
              id: 8,
              label: "拒绝申请"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },

      currentPage: 1,
      total: 1,
      dialogRolesFormVisible: false,
      dialogPermissionFormVisible: false,
      tableData: [{}]
    };
  },
  methods: {
    getRoleList() {
      //查询角色列表
      var _this = this;
      let paramData = {
        pageIndex: this.currentPage,
        pageSize: 10
      };
      getRole(paramData).then(function(res) {
        _this.tableData = res.data.data;
        _this.total = res.data.totalNum;
        for (var i = 0; i < res.data.data.length; i++) {
          if (_this.tableData[i].updateTime) {
            _this.tableData[i].updateTime = util.formatDate.format(
              new Date(res.data.data[i].updateTime),
              "yyyy-MM-dd"
            );
          }
        }
      });
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.getRoleList();
    },
    addRole() {
      //新增角色
      var _this = this;
      let paramData = Object.assign({}, this.addForm);
      saveRole(paramData).then(function(res) {
        if (res.data.status === "200") {
          _this.getRoleList();
          _this.dialogRolesFormVisible = false;
        }
      });
    },
    searchRole() {
      //查询角色
      var _this = this;
      let paramData = {
        pageIndex: 0,
        pageSize: 10,
        roleName: this.searchForm.roleName
      };
      getRole(paramData).then(function(res) {
        if (res.data.status === "200") {
          _this.tableData = res.data.data;
          _this.total = res.data.totalNum;
        }
      });
    },
    deleteRole(index, row) {
      //删除角色
      var _this = this;
      this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios.delete("/role/deleteRole/?ids=" + row.id).then(function(res) {
            if (res.data.status === "200") {
              _this.$message({
                type: "success",
                message: "删除成功!"
              });
              _this.getRoleList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleEdit(index, row) {
      var _this = this;
      this.dialogPermissionFormVisible = true;
      axios
        .get("/role/queryPermissionsByRole?id=" + row.id)
        .then(function(res) {
          if (res.data.status === "200") {
            console.log("aaa", res);
          }
        });
    }
  },
  mounted() {
    this.getRoleList();
  }
};
</script>